<template>
  <el-dialog
    v-bind="$attrs"
    v-on="$listeners"
    width="680px"
    @open="open"
    @close="close"
  >
    <el-form
      label-width="150px"
      ref="form"
      :model="dataForm"
      :rules="rules"
      v-loading="loading"
    >
      <el-form-item
        size="small"
        :label="$t('modules.notify.user_name')"
        prop="roleName"
        style="margin-bottom: 20px"
      >
        <el-input
          maxlength="64"
          style="width: 400px"
          show-word-limit
          v-model="this.user.name"
          disabled
        >
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('role.permission')" prop="node">
        <el-tree
          ref="tree"
          node-key="menuId"
          :data="treeData"
          v-model="dataForm.node"
          :props="defaultProps"
        >
          <template v-slot="{ node, data }">
            <div class="custom-tree-node">
              <span class="label">{{
                data.list
                  ? $t('menu.M_' + data.menuId)
                  : $t('func.' + node.label)
              }}</span>
            </div></template
          >
        </el-tree>
      </el-form-item> </el-form
    ><template #footer>
      <div>
        <el-button size="small" @click="$emit('update:model-value', false)">{{
          $t('common.cancel')
        }}</el-button>
      </div></template
    >
  </el-dialog>
</template>

<script>
import { listAllMenu, listAllFunctions } from '@/api/menu'
import { newRole, roleInfo, updateRole, getRoleMenuFunctions } from '@/api/role'
import { getUserPermission } from '@/api/user'
import { menuDataTranslate2 } from '@/utils'

export default {
  inheritAttrs: false,
  props: ['user'],
  data() {
    var validatePermission = (rule, value, callback) => {
      let checkedNodes = this.$refs.tree
        .getCheckedNodes()
        .filter((node) => !node.list)
        .map((node) => ({ menuFuncCode: node.menuId }))
      if (!checkedNodes || checkedNodes.length === 0) {
        callback(new Error(this.$t('role.permission_select_tip')))
      } else {
        callback()
      }
    }
    return {
      confirmLoading: false,
      loading: false,
      treeData: [],
      dataForm: {
        node: [],
        roleName: '',
        roleFunctionList: []
      },
      defaultProps: {
        children: 'list',
        label: 'menuTitle'
      },
      rules: {
        roleName: [
          {
            required: true,
            message: this.$t('common.nullInputTip'),
            trigger: 'blur'
          }
        ],
        node: [
          {
            required: true,
            validator: validatePermission,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    // reportMenuId() {
    //   return REPORT_MENU_ID
    // }
  },
  methods: {
    open() {
      this.getUserPermission()
    },
    getUserPermission() {
      this.loading = true
      getUserPermission(this.user.userId)
        .then((res) => {
          this.loading = false
          let platMenu = res.platformInfoList.filter((item) => {
            return item.platCode === 'PASS'
          })
          if (!platMenu.length) {
            return
          }
          this.treeData = menuDataTranslate2(
            platMenu[0].menuList,
            'menuId',
            'parentMenuId'
          )
          console.log(this.treeData)
          this.initMenuFunctionTree(this.treeData, res.menuFunctionList)
        })
        .catch((e) => {
          this.loading = false
          this.$confirmError(e)
        })
    },
    close() {
      this.treeData = []
      this.$refs.form.resetFields()
      this.$refs.tree.setCheckedKeys([])
      // checkTreeData(this.treeData, false)
    },

    /**
     * 将功能权限当作菜单加入菜单的Tree中
     * @param menuList
     * @param functionList 功能列表
     */
    initMenuFunctionTree(menuList, functionList) {
      for (let menu of menuList) {
        if (menu.list && menu.list.length > 0) {
          this.initMenuFunctionTree(menu.list, functionList)
        } else {
          for (let fun of functionList) {
            if (menu.menuId === fun.menuId) {
              if (menu.list === undefined) {
                menu.list = []
              }
              var newObj = {
                menuId: fun.menuFuncCode,
                menuTitle: fun.funName
              }
              // 去重
              if (
                menu.list.find((obj) => {
                  return obj.menuId === newObj.menuId
                })
              ) {
              } else {
                menu.list.push(newObj)
              }
            }
          }
        }
      }
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.custom-tree-node {
  /* flex: 1; */
  width: 300px;
  /* display: flex; */
  align-items: center;
  font-size: 14px;
  padding-right: 8px;

  .checkbox {
    float: right;
  }

  .label {
    margin-right: 20px;
  }
}
</style>
